<template>
  <div class="lineGroup">
    <div class="map_title">
      数据映射
    </div>
    <!-- ● 折线图、面积图、柱形图、条形图 -->
    <template v-if="chart_type == 'line'">
       <LineItem :dataMapping="dataMapping" ref="verifyForm" v-for="(item, index) in cardLength" :key="item" :item="index" :mapForm="form" @reduceItem="reduceItem" />
    </template>

    <!-- ● 饼图、环图 -->
    <template v-if="chart_type == 'pie'">
        <PieLoop  :dataMapping="dataMapping" ref="verifyForm" :pieForm="form" />
    </template>
    
    <!-- ● 地理地图 -->
    <template v-if="chart_type == 'map'">
        <MapConfig :dataMapping="dataMapping" ref="verifyForm" :form="form" />        
    </template>
    
    <!-- ● 表格 -->
    <template v-if="chart_type == 'table'">
        <Table :dataMapping="dataMapping" ref="verifyForm" :tableForm="form" />        
    </template>
    
    <!-- ● 数字指标 -->
    <template v-if="chart_type == 'number'">
        <Number :dataMapping="dataMapping" ref="verifyForm" :numberForm="form" />        
    </template>
    
    <!-- ● 组合图 -->
    <template v-if="chart_type == 'group'">
        <Group :dataMapping="dataMapping" ref="verifyForm" v-for="(item, index) in cardLength" :key="item" :item="index" :form="form" @reduceItem="reduceItem" />        
    </template>

    <!-- ● 漏斗图 -->
    <template v-if="chart_type == 'funnel'">
        <!-- <a-row style="display: flex; justify-content: center; align-items: center;margin-bottom: 24px;">
          <a-col :span="3" style="text-align: right;">
            数据集：
          </a-col>
          <a-col :span="21">
            <a-select v-model="dataMapping.datasetId" placeholder="请选择" style="width: 100%;">
                <a-select-option v-for="item in selectDataList" :key="item.id" :value="item.id">
                    {{item.name}}
                </a-select-option>
            </a-select>
          </a-col>
        </a-row> -->
        <a-form-model
          ref="ruleForm"
          :model="dataMapping"
          :rules="rules"
          :label-col="{ span: 4 }"
          :wrapper-col="{ span: 18 }"
        >
          <a-form-model-item label="数据集" prop="datasetId">
            <a-select v-model="dataMapping.datasetId" placeholder="请选择" style="width: 100%;">
                <a-select-option v-for="item in selectDataList" :key="item.id" :value="item.id">
                    {{item.name}}
                </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-form-model>
        <Funnel :dataMapping="dataMapping" v-for="(item, index) in cardLength" :key="item" :item="index" ref="verifyForm" @reduceItem="reduceItem" :funnelForm="form" />
    </template>
    <!-- ● 路径图、留存图 -->
    <template v-if="chart_type == 'path' || chart_type == 'retention'">
        <!-- <a-row style="display: flex; justify-content: center; align-items: center;margin-bottom: 24px;">
          <a-col :span="3" style="text-align: right;">
            数据集：
          </a-col>
          <a-col :span="21">
            <a-select v-model="dataMapping.datasetId" placeholder="请选择" style="width: 100%;">
                <a-select-option v-for="item in selectDataList" :key="item.id" :value="item.id">
                    {{item.name}}
                </a-select-option>
            </a-select>
          </a-col>
        </a-row> -->
        <a-form-model
          ref="ruleForm"
          :model="dataMapping"
          :rules="rules"
          :label-col="{ span: 4 }"
          :wrapper-col="{ span: 18 }"
        >
          <a-form-model-item label="数据集" prop="datasetId">
            <a-select v-model="dataMapping.datasetId" placeholder="请选择" style="width: 100%;">
                <a-select-option v-for="item in selectDataList" :key="item.id" :value="item.id">
                    {{item.name}}
                </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-form-model>
    </template>
    
    <a-button v-if="chart_type =='line' || chart_type =='group' || chart_type == 'funnel'" type="primary" icon="plus" style="margin-top: 10px;" @click="onClick">添加系列</a-button>
  </div>
</template>

<script>
import LineItem from './lineItem.vue';
import PieLoop from './pie_loop.vue';
import MapConfig from './map_config.vue';
import Table from './table.vue';
import Group from './group.vue';
import Number from './number.vue';
import Funnel from './funnel.vue';
import PathMap from './pathMap.vue';
import Retention from './retention.vue';
import { mapState } from 'vuex';
  export default {
    name: 'LineGroup',
    components: {
      LineItem,
      PieLoop,
      MapConfig,
      Table,
      Group,
      Number,
      Funnel,
      PathMap,
      Retention
    },
    props: ['dataMapping', 'form'],
    data () {
      return {
        cardLength: [],
        rules:{
            datasetId: [
                { required: true, message: '请选择数据集', trigger: 'change' }
            ]
        }
      }
    },
    computed: {
      ...mapState('custom', ['DsList']),
      chart_type () {
        const arr = ['line', 'area', 'bar', 'strip'],
              arr2 = ['pie', 'loop']
        if (arr.includes(this.form.type)) return 'line'
        if (arr2.includes(this.form.type)) return 'pie'
        if (this.form.type == 'map') return 'map'
        if (this.form.type == 'group') return 'group'
        if (this.form.type == 'table') return 'table'
        if (this.form.type == 'number') return 'number'
        if (this.form.type == 'funnel') return 'funnel'
        if (this.form.type == 'path') return 'path'
        if (this.form.type == 'retention') return 'retention'
      },
      selectDataList () {
        if (this.form.type == 'funnel') {
          return this.DsList.filter(data => {
            return data.type == 2
          })
        } else if (this.form.type == 'path') {
          return this.DsList.filter(data => {
            return data.type == 3
          })
        } else if (this.form.type == 'retention') {
          return this.DsList.filter(data => {
            return data.type == 4
          })
        }
      }
    },
    methods: {
      onVerifyForm () {
        let abb = null;
        this.$refs.ruleForm.validate(valid => {
            abb = valid
        })
        return abb
      },
      reduceItem (item) {
        if (this.form.type == 'funnel') {
          this.cardLength.splice(item, 1)
          this.dataMapping.steps.splice(item, 1)
        } else {
          this.cardLength.splice(item, 1)
          this.dataMapping.splice(item, 1)
        }
      },
      onClick () {
        if (this.cardLength.length) {
          this.cardLength.push(this.cardLength[this.cardLength.length - 1] + 1)
          if (this.form.type == 'funnel') {
            if (this.dataMapping.steps.length) {
              this.dataMapping.steps.push({ step: this.cardLength[this.cardLength.length - 1]})
            }
          }
        }
      },
      onPathRetentionSubmit () {
          if (!this.dataMapping.datasetId) {
              this.$message.error('请选择数据集');
              return false
          } else {
              return true
          }
      }
    },
    mounted () {
      this.cardLength = []
      if (this.form.type == 'line'||this.form.type == 'area'||this.form.type == 'bar'||this.form.type == 'strip'||this.form.type == 'loop' ||this.form.type == 'pie' || this.form.type == 'group') {
        if (!this.form.dataMapping.length) {
          this.cardLength.push(1)
        }
        for(let i=0;i<this.form.dataMapping.length;i++) {
          this.cardLength.push(i)
        }
      }
      if (this.form.type == 'funnel') {
        if (!this.form.dataMapping.steps) {
          this.$set(this.form.dataMapping,'steps', [])
          this.cardLength.push(1)
          return
        }
        for(let i=0;i<this.form.dataMapping.steps.length;i++) {
          this.cardLength.push(i)
        }
      }
    },
  }
</script>

<style scoped>
.map_title {
  font-size: 16px;
  color: rgba(0, 0, 0, .85);
  font-weight: 500;
  line-height: 32px;
  margin-bottom: 12px;
}
</style>